/*
客户列表
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="enabled(false)">禁用</el-button>
      <el-button @click="enabled(true)">启用</el-button>
      <el-button @click="view" v-repeatClick>查看</el-button>
      <el-button @click="getCustomer" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delCustomer" v-repeatClick>删除</el-button>
      <el-button @click="resetPassword" v-repeatClick>重置密码</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card style="flex: 1;">
      <div class="app-page">
        <div class="content-flex">
          <div>
            <el-form ref="search" :model="search" inline size="small">
              <el-form-item label="" prop="accountOrCustomerNo">
                <el-input placeholder="搜索:登录账户/客户号" v-model="search.accountOrCustomerNo" clearable></el-input>
              </el-form-item>
              <el-form-item label="" prop="customSearchString">
                <el-input placeholder="姓名/电话/微信/服务专员QQ" v-model="search.customSearchString" style="width: 300px"
                  clearable></el-input>
              </el-form-item>
              <el-form-item label="" prop="Enabled">
                <el-select clearable v-model="search.Enabled" placeholder="是否启用" style="width: 100px">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="注册日期" prop="date">
                <el-date-picker v-model="search.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="query_batchId">
                <el-button type="primary" round @click="searchPage">搜索</el-button>
                <el-button type="warning" round @click="$refs.search.resetFields()">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1">
          <el-table height="100%" :data="data" border stripe highlight-current-row ref="multipleTable"
            @row-dblclick="handleRowDbclick" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="55" align="center">
            </el-table-column>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column label="登录账户" prop="account">
            </el-table-column>
            <el-table-column label="客户姓名">
              <template slot-scope="scope">
                <el-link @click="handleRowDbclick(scope.row)">{{ scope.row.customerNum }} <span
                    style="margin-left:10px"> {{ scope.row.chineseName }}</span></el-link>
              </template>
            </el-table-column>
            <el-table-column label="零钱与积分">
              <template slot-scope="scope">
                零钱 ({{ scope.row.balance || 0 }}) <span style="margin-left:10px">积分 ({{ scope.row.integral || 0
                  }})</span>
              </template>
            </el-table-column>
            <el-table-column label="所属门店">
              <template slot-scope="scope">
                {{stores.filter(item => item.id == scope.row.storeId)[0].name}}
              </template>
            </el-table-column>
            <el-table-column label="联系电话" prop="phoneNum">
            </el-table-column>
            <el-table-column label="启用" align="center" width="100">
              <template slot-scope="scope">
                <span style="font-size: 20px">
                  <i class="el-icon-circle-check" style="color: #67c23a" v-if="scope.row.enabled"></i>
                  <i class="el-icon-circle-close" style="color: #f56c6c" v-else></i>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" sortable prop="createTime" align="center"></el-table-column>
          </el-table>
        </div>
        <!-- 分页区 -->
        <div style="margin-top: 10px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[20, 50, 100, 200, 500, 1000]" :page-size="pageSize" background
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 添加修改客户信息 -->
    <el-dialog :title="title + '客户'" v-dialog-drag :visible.sync="dialogFormVisible" :close-on-click-modal="false"
      @close="restForm">
      <div style="position: relative">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本信息" name="baseForm">
            <el-form size="small" :model="baseForm" label-position="left" label-width="120px" ref="baseForm"
              :rules="baseRules">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="storeId" label="所属门店">
                    <el-select filterable style="width: 100%" v-model="baseForm.storeId" placeholder="请选择">
                      <el-option v-for="item in stores" :key="item.id" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="chineseName" label="中文名称">
                    <el-input v-model.trim="baseForm.chineseName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="" label="零钱与积分">
                    <div v-if="title == '修改'">零钱 ({{ baseForm.balance || 0 }}) <span style="margin-left:10px">积分
                        ({{ baseForm.integral || 0 }})</span></div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="type" label="客户类型">
                    <el-select filterable style="width: 100%" v-model="baseForm.type" placeholder="请选择">
                      <el-option v-for="item in baseFormOptions.type" :key="item.value" :value="item.value"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="englishName" label="英文名">
                    <el-input v-model="baseForm.englishName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="wechatAccount" label="微信账号">
                    <el-input v-model="baseForm.wechatAccount"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="account" label="登录账号">
                    <el-input v-model.trim="baseForm.account" placeholder="6-18位数字"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="englishFamilyName" label="英文姓">
                    <el-input v-model="baseForm.englishFamilyName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="overdraft" label="透支额度">
                    <el-input v-model="baseForm.overdraft"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="customerNum" label="客户号">
                    <el-input v-model.trim="baseForm.customerNum"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="gender" label="性别">
                    <el-select filterable style="width: 100%" v-model="baseForm.gender" placeholder="请选择">
                      <el-option label="先生" value="先生"></el-option>
                      <el-option label="女士" value="女士"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="freightDiscount" label="运费折扣">
                    <el-input v-model="baseForm.freightDiscount"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="phoneNum" label="联系电话">
                    <el-input v-model.trim="baseForm.phoneNum"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="creditUser" label="是否信用客户">
                    <el-radio-group v-model="baseForm.creditUser">
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="serviceQQ" label="服务专员QQ">
                    <el-input v-model="baseForm.serviceQQ"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="safeEmail" label="安全邮箱">
                    <el-input v-model="baseForm.safeEmail"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="serviceDiscount" label="是否免费服务">
                    <el-radio-group v-model="baseForm.serviceDiscount">
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="autoIntegral" label="是否自动积分">
                    <el-radio-group v-model="baseForm.autoIntegral">
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="16" :offset="8">
                  <el-form-item prop="logisticsNotice" label="物流跟踪提醒">
                    <el-select filterable style="width: 100%" multiple v-model="baseForm.logisticsNotice"
                      placeholder="请选择">
                      <el-option v-for="item in baseFormOptions.logisticsNotice" :key="item.value" :value="item.value"
                        :label="item.label"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="更多信息" name="detailForm">
            <el-form size="small" :model="detailForm" label-position="left" label-width="120px" ref="detailForm"
              :rules="detailRules">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="countryName" label="国家名称">
                    <el-select @change="handleCountryChange" filterable style="width: 100%"
                      v-model="detailForm.countryName" placeholder="请选择国家名称">
                      <el-option v-for="item in detailOptions.countryName" :key="item" :value="item"
                        :label="item"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="provinceName" label="省份名称">
                    <el-select filterable @change="handleProvinceChange" style="width: 100%"
                      v-model="detailForm.provinceName" placeholder="请选择省份名称">
                      <el-option v-for="item in detailOptions.provinceName" :key="item" :value="item"
                        :label="item"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="cityName" label="城市名称">
                    <el-select filterable style="width: 100%" v-model="detailForm.cityName" placeholder="请选择城市名称">
                      <el-option v-for="item in detailOptions.cityName" :key="item" :value="item"
                        :label="item"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item prop="countyName" label="区县名称">
                    <el-input v-model="detailForm.countyName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="streetName" label="街道名称">
                    <el-input v-model="detailForm.streetName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="postalCode" label="邮政编码">
                    <el-input v-model.trim="detailForm.postalCode"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item prop="address" label="详细地址">
                    <el-input v-model="detailForm.address"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item prop="idCardNum" label="身份证编号">
                    <el-input v-model.trim="detailForm.idCardNum"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item prop="note" label="备注信息">
                    <el-input placeholder="备注" v-model="detailForm.note" type="textarea"
                      :autosize="{ minRows: 3 }"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div style="position: absolute; top: 5px; right: 0">
          <el-checkbox v-model="baseForm.enabled">启用</el-checkbox>
          <el-button type="primary" style="margin-left: 10px" @click="submit" v-repeatClick><i class="fa fa-floppy-o"
              style="margin-right: 10px"></i>保存客户</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 查看客户信息 -->
    <el-dialog title="查看客户信息" :visible.sync="dialogViewVisible" :close-on-click-modal="false" v-dialog-drag>
      <el-tabs type="card">
        <el-tab-pane v-for="item in multipleSelection" :key="item.chineseName" :label="item.chineseName">
          <el-form>
            <el-col :span="12">
              <el-form-item label="英文姓：">{{ item.englishFamilyName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文名：">{{ item.englishName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登录账户：">{{ item.account }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话：">{{ item.phoneNum }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别：">{{ item.gender }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="国家：">{{ item.countryName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="省份：">{{ item.provinceName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="城市：">{{ item.cityName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="区县：">{{ item.countyName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="街道：">{{ item.streetName }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系地址：">{{ item.address }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮政编码：">{{ item.postalCode }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注：">{{ item.note }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否启用：">
                {{ item.enabled ? "是" : "否" }}</el-form-item>
            </el-col>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
let search = {

  //账号或者客户号
  accountOrCustomerNo: '',
  //姓名,电话,微信,服务专员QQ
  customSearchString: '',
  //是否启用
  Enabled: "",
  //时间范围
  date: []
};

//客户基本信息表单
let baseForm = {
  //客户登录账号
  account: '',
  //中文名
  chineseName: '',
  //零钱
  balance: 0,
  //积分
  integral: 0,
  //客户类型
  type: '注册客户',
  //英文名
  englishName: '',
  //微信账号
  wechatAccount: '',
  //所属客户
  storeId: '',
  //英文姓
  englishFamilyName: '',
  //性别
  gender: '',
  //客户号
  customerNum: '',
  //透支额度
  overdraft: '0.00',
  //运费折扣
  freightDiscount: 100,
  //是否免费服务
  serviceDiscount: false,
  //是否信用客户
  creditUser: false,
  //是否自动积分
  autoIntegral: false,
  //物流信息提醒
  logisticsNotice: ['客户手机', '客户微信', '客户邮件', '收货人手机', '收货人微信'],
  //联系电话
  phoneNum: '',
  //安全邮箱
  safeEmail: '',
  //服务专员QQ
  serviceQQ: '',
  //是否启用
  enabled: true,
};
//客户详细信息表单
let detailForm = {
  //国家名称
  countryName: "中国",
  //省份
  provinceName: "",
  //城市名称
  cityName: "",
  //县
  countyName: "",
  //街道
  streetName: "",
  //邮政编码
  postalCode: "",
  //详细地址
  address: "",
  //身份证编号
  idCardNum: "",
  //备注信息
  note: "",
};

import myHeader from "@/components/pageHEader/pageHeader";
import { dateFormat } from "@/utils";
import { mapGetters } from "vuex";
import {
  getCustomer,
  addCustomer,
  getCustomerNum,
  delCustomer,
  modCustomer,
  disableOrEnableCustomer,
  resetPassword,
} from "@/api/consumers/customer";

import { getProvinces, getCities, getCoungries } from "@/api/common";
export default {
  name: "customer",
  components: {
    myHeader,
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      treeData: [],
      //搜索
      search: this.cloneObj(search),
      //选中国家
      selectCountry: "",
      activeName: "baseForm",
      //对话框
      dialogFormVisible: false,
      title: "添加",
      baseForm: this.cloneObj(baseForm),
      detailForm: this.cloneObj(detailForm),
      baseRules: {
        //客户登录账号
        account: [this.$RegExp.required()],
        //中文名
        chineseName: [this.$RegExp.required()],
        //门店Id
        storeId: [this.$RegExp.required('选择不能为空')],
        type: [this.$RegExp.required('选择不能为空')],
        phoneNum: [this.$RegExp.required()],
      },
      detailRules: {

      },
      baseFormOptions: {
        type: [
          {
            label: '散客',
            value: '散客'
          }, {
            label: '注册客户',
            value: '注册客户'
          }, {
            label: 'VIP客户',
            value: 'VIP客户'
          }
        ],
        logisticsNotice: [
          {
            label: '客户手机',
            value: '客户手机'
          }, {
            label: '客户微信',
            value: '客户微信'
          }, {
            label: '客户邮件',
            value: '客户邮件'
          }, {
            label: '收货人手机',
            value: '收货人手机'
          }, {
            label: '收货人微信',
            value: '收货人微信'
          },
        ]
      },
      detailOptions: {
        countryName: [],
        provinceName: [],
        cityName: [],
        countyName: [],
        streetName: [],
      },
      //查看客户
      dialogViewVisible: false,
    };
  },
  computed: {
    ...mapGetters(["stores"]),
  },
  mounted() {
    //获取所有国家
    getCoungries().then((resp) => {
      this.detailOptions.countryName = resp.data;
    });
    let customerNum = this.$route.query.customerNum
    if (customerNum) {
      this.handleAddUpdate('mod', customerNum)
    }
    this.getCustomer();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCustomer()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getCustomer()
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields();
        if (this.$refs.detailForm) this.$refs.detailForm.resetFields();
      });
    },
    handleBeforeUpdate() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleAddUpdate(row, id) {
      this.activeName = "baseForm";
      //修改处理
      if (row) {
        this.title = "修改";
        if (id) {
          let query = {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            accountOrCustomerNo: id,
          };
          getCustomer(query).then((resp) => {
            let row = resp.data.records[0]
            //将数据复制给form
            this.handleModform(row, this.baseForm);
            this.handleModform(row, this.detailForm);
            if (!row.countryName) {
              this.detailForm.countryName = '中国'
            }
            this.getProvinces();
            if (row.provinceName)
              this.getCities();
            this.baseForm.id = row.id;
            this.dialogFormVisible = true;
          });
        } else {
          //将数据复制给form
          this.handleModform(row, this.baseForm);
          this.handleModform(row, this.detailForm);
          if (!row.countryName) {
            this.detailForm.countryName = '中国'
          }
          this.getProvinces();
          if (row.provinceName)
            this.getCities();
          this.baseForm.id = row.id;
          this.dialogFormVisible = true;
        }

      } else {
        getCustomerNum().then(resp => { //获取新增时的客户编号
          this.detailOptions.provinceName = [];
          this.detailOptions.cityName = [];
          this.baseForm = this.cloneObj(baseForm);
          this.detailForm = this.cloneObj(detailForm);
          this.baseForm.customerNum = resp.msg
          this.getProvinces();
          this.title = "添加";
          this.dialogFormVisible = true;
        })
      }
    },
    getCustomer() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        enabled: this.search.Enabled,
        accountOrCustomerNo: this.search.accountOrCustomerNo,
        customSearchString: this.search.customSearchString,
        ...this.handleDate(this.search.date),
      };
      getCustomer(query).then((resp) => {
        this.data = resp.data.records
        this.total = resp.data.total;
      });
    },
    //搜索
    searchPage() {
      this.currentPage = 1
      this.pageSize = 20
      this.getCustomer()
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //获取省份
    getProvinces() {
      getProvinces(this.detailForm.countryName || '中国').then((resp) => {
        this.detailOptions.provinceName = resp.data;
      });
    },
    //获取市
    getCities() {
      getCities(this.detailForm.provinceName).then((resp) => {
        this.detailOptions.cityName = resp.data;
      });
    },
    //select改变
    handleCountryChange() {
      this.detailOptions.provinceName = [];
      this.detailForm.provinceName = "";
      this.getProvinces();
    },
    handleProvinceChange() {
      this.detailOptions.cityName = [];
      this.detailForm.cityName = "";
      this.getCities();
    },
    submit() {
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          this.$refs["detailForm"].validate((valid) => {
            if (valid) {
              let submit = Object.assign(
                this.baseForm,
                this.detailForm
              );
              let request;
              if (this.title == "添加") {
                request = addCustomer(submit);
              } else {
                request = modCustomer(submit);
              }
              request.then((resp) => {
                this.$message.success(resp.message || "成功");
                this.dialogFormVisible = false;
                this.getCustomer();
              });
            } else {
              this.activeName = "detailForm";
            }
          });
        } else {
          this.activeName = "baseForm";
        }
      });
    },
    //查看客户信息
    view() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.dialogViewVisible = true;
    },
    //启用或禁用
    enabled(enabled) {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      let ids = this.multipleSelection.map((item) => item.id);
      let tip;
      if (enabled) {
        tip = "此操作将启用客户信息, 是否继续?";
      } else {
        tip = "此操作将禁用客户信息, 是否继续?";
      }
      this.confirm(tip).then(() => {
        disableOrEnableCustomer(ids, { enabled }).then((resp) => {
          this.$message.success(resp.message || "成功");
          this.getCustomer();
        });
      });
    },
    //删除客户信息
    delCustomer() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delCustomer(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getCustomer();
          }
        );
      });
    },
    resetPassword() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.resetConfirm().then(() => {
        resetPassword(this.multipleSelection.map((item) => item.customerNum)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getCustomer();
          }
        );
      });
    }
  },
};
</script>

<style scoped lang='scss'>
.tdItem {
  line-height: 25px;
}
</style>
